<template>
  <el-table
      :data="userList"
      style="width: 100%"
      stripe
      border>

      <!-- index 序列 -->
      <el-table-column
        label="#"
        type="index"
        align="center">
      </el-table-column>

      <!-- 用户名 -->
      <el-table-column
        prop="username"
        label="用户名"
        align="center">
      </el-table-column>

      <!-- 邮箱 -->
      <el-table-column
        prop="email"
        label="邮箱"
        align="center">
      </el-table-column>

      <!-- 电话 -->
      <el-table-column
        prop="mobile"
        label="电话"
        align="center">
      </el-table-column>

      <!-- 角色 -->
      <el-table-column
        prop="role_name"
        label="角色"
        align="center">
      </el-table-column>

      <!-- 状态 -->
      <el-table-column
        label="状态"
        align="center">
        <!-- 状态栏的开关按钮 -->
        <template v-slot="slot">
          <el-switch
            v-model="slot.row.mg_state"
            active-color="#13ce66"
            @change="switchChange(slot.row)">
          </el-switch>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateRole(scope)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="delUserById(scope)"></el-button>
          <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
            <el-button type="warning" icon="el-icon-star-off" size="mini" @click="openUpdateUserDialog(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>
</template>

<script>
// Axios 方法
import { getUserState, delUser } from '@/network/homeRequest';

export default {
  props: {
    userList: { // 用户列表数据
      type: Array,
      default() {
        return [
          {username: 'Bill', mobile: '18616358651',role_name: '炒鸡管理员', email: '752299324@qq.com', mg_state: true, }
          ]
      }
    }
  },
  methods: {
    async switchChange(res) { // switch状态发生变化时触发
      const state = res.mg_state; // 状态false / true
      const id = res.id;
      
      const {data, meta} = await getUserState(id, state);
      console.log(data, meta);

      if (meta.status !== 200) { // 请求异常
        data.mg_state = !data.mg_state;
        return this.$message({
          showClose: true,
          message: '修改失败, 请检查网络',
          type: 'error'
        });
      }

      res.mg_state = data.mg_state === 1 ? true : false;
      return this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        });


      
    },
    updateRole(scope) { // 修改用户信息
      this.$bus.$emit('openDialogUpdate', scope.row.id);
    },
    async delUserById(scope) { // 根据用户id删除用户
      const ret = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .catch(err => err);
      // console.log(ret, scope.row.id); // 打印数据
      if (ret !== 'confirm') { // 取消删除
        return this.$message({
          showClose: true,
          message: '删除操作取消',
          type: 'info'
        });
      }

      // 执行删除网络请求
      const { meta } = await delUser(scope.row.id);
      // console.log(meta);
      if (meta.status !== 200) { // 异常
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.$message.success(meta.msg);
      return this.$bus.$emit('getUserList');
    },
    openUpdateUserDialog(userInfo) { // 打开更新用户dialog
      return this.$bus.$emit('distributeUserDialog', userInfo);
    }
  }

}
</script>

<style lang="scss" scoped>

</style>